import { loginApi } from '../../api/user';
import './index.css';
// import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { Form, Input, Button, message } from 'antd';
import { useState } from 'react';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Typography } from 'antd';
const { Title } = Typography;


const Login = () => {

  const navigate = useNavigate();
  const [form] = Form.useForm();

  const [isLoading, setIsLoading] = useState(false);

  const onFinish = async (values: { username: string; password: string }) => {
    setIsLoading(true);
    try {
      const res:any = await loginApi(values);
      // 假设后端返回结构为{ data: { token } }, 调整token获取路径
      localStorage.setItem('token', res.data?.token || res.token); // 兼容两种可能的返回结构
      localStorage.setItem('userId', res.data?.userId || res.userId); // 存储后端返回的userId
      console.log('登录响应:', res); // 输出完整响应对象查看token字段位置
      
      message.success('登录成功');
      navigate('/dashboard');
    } catch (error) {
      if (error instanceof Error) {
        message.error(error.message || '登录失败');
      }
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="login-container" style={{ minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
      <div className="login-card">
        <div className="login-header" style={{ textAlign: 'center', marginBottom: '30px' }}>
          <Title level={2} style={{ marginBottom: '10px', color: '#333', fontWeight: '600' }}>欢迎回来</Title>
          <span style={{ color: '#666', fontSize: '14px' }}>请登录您的账号继续访问管理后台</span>
        </div>
        <Form style={{ backgroundColor: 'white', padding: '40px', borderRadius: '16px', boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)', maxWidth: '400px', width: '100%' }}
          form={form}
          name="login"
          labelCol={{ span: 0 }}
          wrapperCol={{ span: 24 }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名！' }]}
          >
            <Input prefix={<UserOutlined className="input-icon" />} placeholder="用户名"
              style={{ height: '48px', borderRadius: '12px', border: '1px solid #e5e6eb', padding: '0 16px' }} />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码！' }]}
          >
            <Input.Password prefix={<LockOutlined className="input-icon" />} placeholder="密码"
              style={{ height: '48px', borderRadius: '12px', border: '1px solid #e5e6eb', padding: '0 16px' }} />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={isLoading} className="login-button"
              style={{ width: '100%', height: '48px', borderRadius: '12px', fontSize: '16px', fontWeight: '600' }}>
              登录
            </Button>
          </Form.Item>
          <div className="register-link">
            还没有账号? <a href="/register">去注册</a>
          </div>
        </Form>
      </div>
    </div>
  );
};

export default Login;